<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>销售趋势分析</title>
    <%@include file="/comm/head.jsp"%>
    <script src="/js/echarts.js"></script>
    <script src="/js/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="80">
                    <form-item label="查询年份:">
                        <date-picker  type="year" format="yyyy" @on-change="year=$event"style="width: 150px" ></date-picker>
                    </form-item>

                    <i-button type="primary"icon="ios-search" style="margin-left:20px" @click="searchXSreportList();">搜索</i-button>

                </i-form>
            </p>
        </Panel>
    </Collapse>

    <i-table :columns="myColumns" :data="myData" :height="400":width="400" border stripe style="float: left" >

    </i-table>
<div id="TwoLineChart" style="width:600px; height:400px;border:0.5px solid gray;float: right"></div>

</div>
<script type="text/JavaScript">
    new Vue({
        el:"#root",
        data:{
            myColumns:[
                {title:"月份",key: "month"},
                {title:"销售额",key: "money"},
            ],
            myData:[],
            myData1:[],
            xsReportVo:{},
            year:"2020",
            // 指定图表的配置项和数据
            names:[],
            values:[],
        },
        mounted(){
            this.searchXSreportList();
            this.searchXSreport();
        },
        methods:{
            searchXSreportList(){//,this.xsReportVo
                axios.get(`${ctx}/cus/xsqsfx/list?year=${this.year}`)
                    .then(({data})=>{
                        this.myData=data.result;
                        this.loadTwoLine(this.year)
                    });
            },
  loadTwoLine(year) {

        var myChart = echarts.init(document.getElementById('TwoLineChart'));
        // 显示标题，图例和空的坐标轴
        myChart.setOption({
            title: {
                text: '销售统计图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['销售额']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: {
                type: 'category',
                boundaryGap: false, //取消左侧的间距
                data: ['1月','2月',"3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",]
            },
            yAxis: {
                type: 'value',
                splitLine: { show: false },//去除网格线
                name: ''

            },
            series: [{
                name: '销售额',
                type: 'line',
                symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                data: []
            },
               /* {
                    name: '办结',
                    type: 'line',
                    symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                    data: []
                }*/]
        });
        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
        var names = [];    //类别数组（实际用来盛放X轴坐标值）
        var series1 = [];
        var  year1=year
        $.ajax({
            type: 'get',
            url: 'cus/xsqsfx/EcharsShow?year='+year1,//请求数据的地址
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $.each(result, function (index, item) {
                    names.push(item.month);    //挨个取出类别并填入类别数组
                    series1.push(item.money);
                });
            /*    $.each(result.banJie, function (index, item) {
                    series2.push(item.LANDNUM);
                });*/
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis: {
                        data: names
                    },
                    series: [{
                        data: series1
                    },
                        /*{
                            data: series2
                        }*/]
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
      loadTwoLine();
    },}});

</script>
</body>
</html>
